<template>
    <div class="login">
        <div class="login-left">
            <img src="/src/assets/images/huiyanlogo.png" class="logo">
            <img src="/src/assets/svg/login-box-bg.svg" class="bg">
            <p class="title">灰盐科技有限公司后台管理系统</p>
            <p class="detail">输入您的个人详细信息开始使用！</p>
        </div>
        <div class="login-right">
            <h2>登录</h2>
            <a-input v-model:value="username" size="large" placeholder="username" />
            <a-input-password class="d-b" size="large" v-model:value="password" placeholder="password" />
            <div class="box1">
                <a-checkbox class="remember" v-model:checked="remember">记住我</a-checkbox>
                <a href="javascript:;" class="forget">忘记密码？</a>                
            </div>
            <a-button type="primary" class="signIn d-b" size="large" @click="signIn">登录</a-button>
            <p class="else">其他登录方式</p>
            <div class="box2">
                <github-outlined />
                <wechat-outlined />
                <qq-outlined />
                <alipay-circle-outlined />
                <weibo-circle-outlined />
                <google-outlined />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { GithubOutlined, WechatOutlined, WeiboCircleOutlined, QqOutlined, GoogleOutlined, AlipayCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
    setup() {
        let username = ref<string>('Leungyh')
        let password = ref<string | number>('123456')
        let remember = ref<Boolean>(false)
        let router = useRouter()

        const signIn = () => {
            let user:{} = {
                username: username,
                password: password
            }
            window.sessionStorage.setItem("userInfo", JSON.stringify(user))
            router.push({ name: 'Home'});
        }

        return {
            username,
            password,
            remember,
            signIn
        };
    },
    components: {
        GithubOutlined, WechatOutlined, WeiboCircleOutlined, QqOutlined, GoogleOutlined, AlipayCircleOutlined
    },
})
</script>

<style lang="scss" scoped>
.login{
    padding: 50px 100px;
    display: flex;
    flex-direction: row;
    background-color: #293146;
    justify-content: space-around;
}
// .login::before{
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     margin-left: -48%;
//     // background-image: url(@/assets/svg/login-bg-dark.svg);
//     background-position: 100%;
//     background-repeat: no-repeat;
//     background-size: auto 100%;
//     content: '';
// }
.login-left{
    width: 50%;
    .logo{
        display: block;
        width: 200px;
        height: 100px;
        text-align: left;
    }
    .bg{
        display: inline-block;
        width: 400px;
        height: 200px;
        margin-top: 120px;
        margin-bottom: 35px;
    }
    .title{
        color: #fff;;
        font-size: 30px;
        margin-bottom: 10px;
    }
    .detail{
        color: #c9d1d9;
    }
}
.login-right{
    width: 50%;
    padding: 200px;
    h2{
        color: rgba(255, 255, 255, 0.65);
        font-weight: 700;
        font-size: 28px;
    }
    .ant-input{
        margin-bottom: 22px;
    }
    ::v-deep .ant-input{
        width: 400px;
        background-color: #232a3b;
        border: 1px solid #232a3b;
        color: #c9d1d9;
    }
    .ant-input-password{
        width: 400px;
        background-color: #232a3b;
        border: 1px solid #232a3b;
        color: #c9d1d9;
        margin-bottom: 22px;
    }
    .box1{
        width: 400px;
        margin-bottom: 22px;
        .remember{
            color: #c9d1d9;
        }
        .forget{
            float: right;
        }
    }
    .signIn{
        width: 400px;
        margin-bottom: 22px;
    }
    .else{
        width: 400px;
        color: #8b949e;
        text-align: center;
    }
    .box2{
        width: 400px;
        display: flex;
        color: #888;
        justify-content: space-between;
        span{
            font-size: 24px;
            cursor: pointer;
        }
    }
}
</style>